<div class="sticky top-0 px-6 py-4 flex items-center h-14 mb-4 bg-white text-base font-medium text-gray-900 z-20">
  <div class="shrink-0 text-xl">{{'PAC.Xpert.General' | translate: {Default: 'General'} }}</div>
  <div class="grow flex justify-end">
  </div>
</div>

<div class="relative flex-1 flex flex-col justify-between items-stretch px-8 py-4">
  <div class="pt-2">
    <div class="pb-2">
      <label class="py-2 font-medium leading-[20px] text-gray-900">{{ 'PAC.Xpert.Name' | translate: {Default: 'Name'} }}</label>
      <input class="w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs"
        [placeholder]="'PAC.Xpert.EnterWorkspaceName' | translate: {Default: 'Enter workspace name'}"
        [(ngModel)]="name"
        >
    </div>
    <button type="button" class="btn btn-large btn-primary pressable" (click)="update()">
      {{ 'PAC.ACTIONS.Update' | translate: {Default: 'Update'} }}
    </button>
  </div>

  <div>
    <div class="text-xl font-semibold text-orange-500 pb-2">
      {{ 'PAC.KEY_WORDS.DangerZone' | translate: {Default: 'Danger zone'} }}
    </div>

    <div class="border border-solid border-orange-500 rounded-xl flex flex-col">
      <div class="w-full flex justify-between items-center p-4">
        <div class="flex flex-col">
          <div class="font-semibold">
            {{ 'PAC.Xpert.ArchiveWorkspace' | translate: {Default: 'Archive this workspace'} }}
          </div>
          <div>
            {{ 'PAC.Xpert.ArchiveWorkspaceDesc' | translate: {Default: 'Mark this workspace and all its xperts and toolsets as archived and read-only'} }}.
          </div>
        </div>

        <button type="button" class="btn btn-large danger pressable" (click)="archive()">
          {{ 'PAC.Xpert.ArchiveWorkspace' | translate: {Default: 'Archive this workspace'} }}
        </button>
      </div>

      <div class="border-b border-solid border-divider-regular"></div>

      <div class="w-full flex justify-between items-center p-4">
        <div class="flex flex-col">
          <div class="font-semibold">
            {{ 'PAC.Xpert.DeleteWorkspace' | translate: {Default: 'Delete this workspace'} }}
          </div>
          <div>
            {{ 'PAC.Xpert.DeleteWorkspaceDesc' | translate: {Default: 'Once deleted, it will be gone forever. Please be certain'} }}.
          </div>
        </div>

        <button type="button" class="btn btn-large danger pressable" (click)="delete()">
          {{ 'PAC.Xpert.DeleteWorkspace' | translate: {Default: 'Delete this workspace'} }}
        </button>
      </div>
    </div>
  </div>

  @if (loading()) {
    <ngm-spin class="absolute top-0 left-0 w-full h-full"></ngm-spin>
  }
</div>